<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: wiz
 * @Date: 2023-04-30 12:22:02
 * @LastEditors: wiz
 * @LastEditTime: 2023-08-20 18:30:36
-->
<template>
  <div class="itempannel">
    <Item
      style="overflow: hidden"
      :list="list"
      :compBoxInfo="GT_compBoxInfo"
    ></Item>
  </div>
</template>

<script lang="ts">
import { Item, Tsrv, T_srv, ts, ifs, N_oFlowchart, vue } from './config';

@T_srv.comp({
  components: {
    Item
  }
})
export default class ruleGraphItemPanel extends vue {
  @T_srv.prop({ type: Array, required: true, default: [] }) list: Array<
    N_oFlowchart.I_item
  >;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  // 父组件compBoxInfo
  @T_srv.prop({
    required: false,
    type: Boolean,
    default: true
  })
  showItem: boolean;

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  created() {
    this.GT_compBoxInfo = this.compBoxInfo;
    this.G_compID = this.GT_compBoxInfo.compID;
    this.GT_compBox = this.GT_compBoxInfo.TcompBox;
    this.GT_compBox.addCompMergeName(this.G_compID, `itemPanel`, this);
  }

  mounted() {
    if (!this.showItem) {
      const itemPanel: any = this.$refs.itempannel;
    }
  }

  destroyed() {
    this.GT_compBox.removeCompMergeName(this.G_compID, `itemPanel`);
  }
}
</script>

<style scoped lang="scss">
.itempannel {
  position: relative;
  display: inline-block;

  z-index: 2;
  background: #fff;
  height: 100%;
  width: 100%;
  transition: all 0.5s ease-in-out;
  border-top: none;
}
</style>
